<template>
    <div class="today">
        <h3 class="title"></h3>
        <div class="datas">
            <h3><span class="num">赤岗街道</span><span>A1号应急仓</span></h3>
        </div>
        <!-- <ul class="pvOfDayes">
            <li class="today">
                <p>水</p>
                <p><span style="color:#0DD8FC;">248.9</span><span>度</span></p>
            </li>
            <li class="seven">
                <p>电</p>
                <p><span style="color:#FF9200;">166</span><span>度</span></p>
            </li>
            <li class="thirty">
                <p>人</p>
                <p><span style="color:#1DF700;">3</span><span>在岗</span></p>
            </li>
        </ul> -->
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .pvOfDayes{
        height:6rem;
        padding-top:0.3rem;
        display:flex;
        li{
            flex:1;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            p{
                margin-left:1rem;
                &:nth-of-type(1){
                    color:#fff;
                    height:3rem;
                    line-height:3rem;                     
                }
                &:nth-of-type(2){
                    span{
                        &:nth-of-type(1){
                            font-size:1.5rem;
                            margin-right:.5rem;
                            font-weight:600;
                        }
                        &:nth-of-type(2){
                            color:#E9F274;
                        }
                    }
                }
            }
        }
        .today{
            background-image: url('../../../../static/images/commonServer/sky.png');
        }
        .seven{
            //background-image: url('../../../../static/images/commonServer/sky.png');
        }
        .thirty{
            //background-image: url('../../../../static/images/commonServer/sky.png');
        }
    }
    .today{
        flex:1;
        padding:.3rem 1.4rem .5rem 1.8rem;
        .title{
            line-height:2.8rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:left;
            height:3.5rem;
            color: #00FFFF;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }
        .datas{
            height:6rem;
            width:100%;
            background-image: url('../../../../static/images/commonServer/todayBg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(90deg, rgba(5,43,63,0.8), rgba(0,255,255,0.2));
                z-index: 0;
            }
            h3{
                text-align:center;
                height:100%;
                line-height: 6rem;
                position: relative;
                z-index: 1;
                .num{
                    color: #FFFFFF;
                    font-size:2rem;
                    margin-right:1rem;
                    letter-spacing: .2rem;
                    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
                    font-family: 'Digital-7', sans-serif;
                }
                span:not(.num) {
                    color: #00FFFF;
                    font-size: 1.2rem;
                    opacity: 0.8;
                }
            }
        }
    }
</style>